<template>
	<div>
		<div class="content">
			<div @click="startRecord" class="record-p">
				<img src="@/assets/img/weChat/voice.png" alt="">
			</div>
			<!-- 录音弹框 -->
			<div class="remark-d" v-if="isRecord">
				<div class="win">
					<div class="re-d-c">
						<div class="vux-circle-demo">
							<span style="color:#36D1DC;font-size: 0.3rem;">{{time}}s</span>
							<div style='width:2rem;height:2rem;margin-top: 0.3rem;'>
								<x-circle :percent="percent" :stroke-width="6" :trail-width="6" :stroke-color="['#36D1DC', '#5B86E5']" trail-color="#ececec">
									<span class="endRecord" @click="stopRecord">结束</span>
								</x-circle>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { XCircle } from 'vux'
import { getLinkInfo } from '@/api/commonApi'
export default {
	components: {
		XCircle
	},
	computed: {
		filesObj() {
			return this.$store.state.media.filesObj
		},
		voices() {
			return this.$store.state.media.voicesSource
		},
		imgDataSource() {
			return this.$store.state.media.imgDataSource
		},
		voiceServerIds() {
			return this.$store.state.media.voiceServerIds
		},
		serverIds() {
			return this.$store.state.media.serverIds
		},
		video() {
			return this.$store.state.media.video
		},
		link() {
			return this.$store.state.media.link
		},
		timeList() {
			return this.$store.state.media.timeList
		},
		showModel() {
			return this.$store.state.media.showModel
		},
		schoolId() {
			return this.$store.state.user.schoolId
		},
		access_token() {
			return this.$store.state.media.access_token
		}
	},
	data() {
		return {
			isRecord: false,
			time: -1,
			percent: 0,
			interval: null
		}
	},
	methods: {
		// 开始录制
		startRecord() {
			this.$store.commit('media/clear')
			wx.startRecord()
			this.isRecord = true
			this.$store.commit('media/changeModel', false)
			this.time = -1
			this.percent = 0
			this.timer()
		},
		timer() {
			if (!this.isRecord) {
				return
			}
			this.time++
			this.percent = this.time / 60 * 100
			if (this.time >= 59) {
				this.stopRecord()
				return
			}
			this.interval = setTimeout(() => {
				this.timer()
			}, 1000)
		},
		// 停止录制
		stopRecord() {
			if (this.time < 6) {
				this.$vux.toast.text('录制时间不得小于6秒')
				this.isRecord = false
				this.$store.commit('media/changeModel', true)
				clearTimeout(this.interval)
				wx.stopRecord({})
				return
			}
			var self = this
			wx.stopRecord({
				success: function (res) {
					var localId = res.localId;
					self.$store.commit('media/addVoice', localId)
					self.$emit('upLoad')
				}
			})
			this.isRecord = false
			this.$store.commit('media/changeModel', true)
			clearTimeout(this.interval)
			this.$store.commit('media/addTime', this.time)
		}
	},
	mounted() {
		var self = this
		wx.onVoiceRecordEnd({
			// 录音时间超过一分钟没有停止的时候会执行 complete 回调
			complete: function (res) {
				var localId = res.localId
				self.$store.commit('media/addVoice', localId)
				self.isRecord = false
			}
		})
		wx.onVoicePlayEnd({
			success: function (res) {
				var localId = res.localId; // 返回音频的本地ID
			}
		})
	},
	destroyed() {
		wx.stopRecord({})
		this.$store.commit('media/clear')
	}
}
</script>
<style lang='less' scoped>
.endRecord {
	color: #36d1dc;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	font-size: 0.32rem;
}
.vux-circle-demo {
	padding-top: 20px;
	text-align: center;
}
.vux-circle-demo > div {
	margin: 0 auto;
}
.audioList {
	display: flex;
	flex-wrap: wrap;
}
.audio {
	position: relative;
	color: #333;
	font-size: 0.28rem;
	display: flex;
	align-items: center;
	padding: 0 0.3rem;
	width: 1.36rem;
	height: 0.6rem;
	border-radius: 0.3rem;
	border: 0.01rem solid #d2d2d2;
	margin: 0 0.2rem 0.2rem 0;
}
.audio img {
	width: 0.24rem;
	height: 0.3rem;
	margin-right: 0.12rem;
}

.win {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, 0.5);
}
.re-d-c {
	width: 6.8rem;
	height: 3.6rem;
	background: rgba(255, 255, 255, 1);
	border-radius: 0.1rem;
	position: absolute;
	left: 0.2rem;
	bottom: 0.2rem;
	z-index: 999;
}
.remark-operation {
	height: 0.88rem;
	line-height: 0.88rem;
	padding: 0 0.27rem;
	font-size: 0.32rem;
	color: #128fef;
}
.remark-a input {
	width: 6rem;
	height: 0.76rem;
	border: 1px solid #e5e5e5;
	margin-left: 0.3rem;
	font-size: 0.26rem;
	padding: 0 0.1rem;
	margin-top: 0.5rem;
}
.record-p {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	padding-top: 0.2rem;
	box-sizing: border-box;
	width: 0.72rem;
	text-align: center;
	height: 0.72rem;
	border-radius: 50%;
	background: #e6e6e6;
	> img {
		width: 0.22rem;
		height: 0.34rem;
	}
}
.stop-btn {
	width: 6.4rem;
	height: 0.8rem;
	background: rgba(18, 143, 239, 1);
	border-radius: 0.08rem;
	line-height: 0.8rem;
	text-align: center;
	color: #ffffff;
	margin: 0.28rem auto;
	font-size: 0.32rem;
}
</style>
